<template>
  <div>
    <div class="user-cell">
      <Card :bordered="false" style="min-width:1100px; margin: 0 auto;">
        <p slot="title">{{ title }}</p>
        <p>
            <Collapse
                v-model="panelIndex"
                simple
                accordion
                >
                <Panel :hide-arrow="index==0 ? true :false"
                    :name="index+''"
                    v-for="(item, index) in editList"
                    :key="index" >

                    <span v-if="index==0" style="margin-left:30px">{{item.title}}</span>
                    <span v-else>{{item.title}}</span>

                    <span  v-if="index==0" style="margin-left:140px">{{getInfoObj.username}}</span>
                    <span  v-if="index==1" style="margin-left:150px">********</span>
                    <span  v-if="index==2" style="margin-left:150px">{{getInfoObj.real_name}}</span>
                    <span  v-if="index==3" style="margin-left:150px">{{getInfoObj.telphone}}</span>
                    <span  v-if="index==4" style="margin-left:150px">{{getInfoObj.email}}</span>
                    <div slot="content"  v-if="index!=0">
                        <Row  v-if="index==1">
                            <Row type="flex" style="border-top: 2px solid #e8eaec">
                                <Form
                                    ref="formModalDataRole1"
                                    :label-width="100"
                                    style="margin-top: 20px"
                                    :model="modalDataRole"
                                    :rules="formModalRule">
                                    <FormItem label="旧密码:" prop="password">
                                        <Input  type="password" class="input-widths" v-model="modalDataRole.password"  placeholder="请输入旧密码"/>
                                    </FormItem>
                                    <FormItem label="新密码:" prop="newPassword">
                                        <Input type="password" class="input-widths" v-model="modalDataRole.newPassword" placeholder="请输入您的新密码6-14位"/>
                                    </FormItem>
                                    <FormItem label="确认新密码:" prop="surePassword">
                                        <Input type="password" class="input-widths" v-model="modalDataRole.surePassword" placeholder="请再次输入您的新密码"/>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary"  @click="handleSubmit('formModalDataRole'+index,item,index)">保存</Button>
                                        <Button
                                        class="button-space-25"
                                        @click="cancle(item,index)"
                                        >取消</Button
                                        >
                                    </FormItem>
                                </Form>
                            </Row>
                       
                        </Row>
                        <Row  v-if="index==2">
                            <Row type="flex" style="border-top: 2px solid #e8eaec">
                                <Form
                                    ref="formModalDataRole2"
                                    :label-width="100"
                                    style="margin-top: 20px"
                                    :model="modalDataRole"
                                    :rules="formModalRule2">
                                    <FormItem label="变更后的姓名:" prop="real_name">
                                        <Input class="input-widths" v-model="modalDataRole.real_name"></Input>
                                    </FormItem>

                                     <FormItem>
                                        <Button type="primary"  @click="handleSubmit('formModalDataRole'+index,item,index)">保存</Button>
                                        <Button
                                        class="button-space-25"
                                        @click="cancle(item,index)"
                                        >取消</Button
                                        >
                                     </FormItem>
                                </Form>
                                </Row>
                                <Row>
                             
                            </Row>
                        </Row>
                        <Row  v-if="index==3">
                            <Row type="flex" style="border-top: 2px solid #e8eaec">
                                <Form
                                    ref="formModalDataRole3"
                                    :label-width="120"
                                    style="margin-top: 20px"
                                    :model="modalDataRole"
                                    :rules="formModalRule3"
                                >
                                    <FormItem label="变更后的手机号:" prop="telphone">
                                    <Input class="input-widths" v-model="modalDataRole.telphone" />
                                    </FormItem>

                                    <FormItem>
                                        <Button type="primary"  @click="handleSubmit('formModalDataRole'+index,item,index)">保存</Button>
                                        <Button
                                        class="button-space-25"
                                        @click="cancle(item,index)"
                                        >取消</Button
                                        >
                                    </FormItem>
                                </Form>
                                </Row>
                                <Row>
                               
                            </Row>
                        </Row>
                        <Row  v-if="index==4">
                            <Row type="flex" style="border-top: 2px solid #e8eaec">
                                <Form
                                 ref="formModalDataRole4"
                                    :label-width="120"
                                    style="margin-top: 20px"
                                    :model="modalDataRole"
                                    :rules="formModalRule4"
                                >
                                    <FormItem label="变更后的邮箱:" prop="email">
                                    <Input class="input-widths" v-model="modalDataRole.email" />
                                    </FormItem>

                                    <FormItem>
                                        <Button type="primary"  @click="handleSubmit('formModalDataRole'+index,item,index)">保存</Button>
                                        <Button
                                        class="button-space-25"
                                        @click="cancle(item,index)"
                                        >取消</Button
                                        >
                                    </FormItem>
                                </Form>
                                </Row>
                                <Row>
                       
                            </Row>
                        </Row>
                    </div>
            
                </Panel>
            </Collapse>
        </p>
      </Card>
     
    </div>
  </div>
</template>
<script>
// import Common from "_c/common.vue";
import {
    resultCallback // 根据请求的status执行回调函数
} from "@/libs/dataHanding";
import {
    editUserInfo, //修改用户
    getUserInfo // 获取单个用户信息
} from "@/api/data";
export default {
    // mixins: [Common],
    data() {
        var surePwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入新密码"));
            } else if (value !== this.modalDataRole.newPassword) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            title: "个人中心",
            panelIndex: null,
            selectedIndex: "",
            getInfoObj: {
                real_name: "",
                password: "******",
                username: "",
                telphone: "",
                email: ""
            },
            editList: [
                {
                    title: "用户名",
                    name: "test1",
                    value: "用户名1",
                    btn: false,
                    editShow: true
                },
                {
                    title: "密码",
                    name: "test2",
                    value: "用户名2",
                    btn: false,
                    editShow: false
                },
                {
                    title: "姓名",
                    name: "test3",
                    value: "用户名3",
                    btn: false,
                    editShow: false
                },
                {
                    title: "手机",
                    name: "test3",
                    value: "用户名3",
                    btn: false,
                    editShow: false
                },
                {
                    title: "邮箱",
                    name: "test3",
                    value: "用户名3",
                    btn: false,
                    editShow: false
                }
            ],
            modalDataRole: {
                password: "996955",
                newPassword: "",
                surePassword: "",
                email: "",
                username: "",
                telphone: "",
                real_name: ""
            },

            collapseVal: null,

            formModalRule: {
                //对应数据库里面的name
                password: [
                    {
                        required: true,
                        message: "请输入旧密码",
                        trigger: "blur"
                    }
                ],
                newPassword: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur"
                    },
                    {
                        pattern: /^\d{6,14}$/,
                        message: "请输入6-14位新密码",
                        trigger: "blur"
                    }
                ],
                surePassword: [
                    {
                        required: true,
                        message: "请再次输入新密码",
                        trigger: "blur"
                    },
                    { validator: surePwd, required: true, trigger: "blur" }
                ]
            },
            formModalRule2: {
                //对应数据库里面的name
                real_name: [
                    {
                        required: true,
                        message: "请输入真实姓名",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 20,
                        message: "字符过长",
                        trigger: "change"
                    }
                ]
            },
            formModalRule3: {
                telphone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 11,
                        message: "字符过长",
                        trigger: "change"
                    }
                ]
            },
            formModalRule4: {
                email: [
                    {
                        required: true,
                        message: "请输入email",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 20,
                        message: "字符过长",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        this.getdata();
    },
    methods: {
        async getdata() {
            this.getInfoObj = (await getUserInfo()).data.data || {};
            console.log("this.getInfoObj:", this.getInfoObj);
            this.modalDataRole = Object.assign({}, this.getInfoObj);
        },
        chanceExpand(e) {
            //this.expand = !this.expand;
        },
        sure(item, index) {
            console.log("--this.panelIndex0:-", this.panelIndex);
            console.log(
                "--sure:-",
                this.panelIndex.findIndex(value => value == index)
            );
            this.panelIndex.splice(
                this.panelIndex.findIndex(value => value == index),
                1
            );
            console.log("--this.panelIndex1:-", this.panelIndex);
            item.btn = !item.btn;
        },
        cancle(item, index) {
            this.panelIndex.splice(
                this.panelIndex.findIndex(value => value == index),
                1
            );
            item.btn = !item.btn;
        },
        chanceExpands(index, item) {
            item.btn = !item.btn;
            console.log("--", item);
        },
        tagByIndex(panelIndex) {
            panelIndex; // 表示所展开选中的数据
        },
        handleSubmit(name, item, index) {
            this.$refs[name][0].validate(async valid => {
                if (valid) {
                    console.log("valid:", valid);

                    let paramData = {};
                    let res = {};
                    paramData.id = this.modalDataRole.id;
                    if (name == "formModalDataRole1") {
                        paramData.password = this.modalDataRole.password;
                        paramData.newPassword = this.modalDataRole.newPassword;
                        paramData.surePassword = this.modalDataRole.surePassword;
                        let res = await editUserInfo(paramData);
                        if (res.data.code != 0) {
                            //axios.js 已经截取了错误信息，这里不需要提示了。
                        } else {
                            resultCallback(200, "修改成功！", () => {
                                console.log("--update --");
                                this.getdata();
                                this.sure(item, index);
                            });
                        }
                    } else if (name == "formModalDataRole2") {
                        paramData.real_name = this.modalDataRole.real_name;
                        let res = await editUserInfo(paramData);
                        if (res.data.code != 0) {
                            //axios.js 已经截取了错误信息，这里不需要提示了。
                        } else {
                            resultCallback(200, "修改成功！", () => {
                                console.log("--update --");
                                this.getdata();
                                this.sure(item, index);
                            });
                        }
                    } else if (name == "formModalDataRole3") {
                        paramData.telphone = this.modalDataRole.telphone;
                        let res = await editUserInfo(paramData);
                        if (res.data.code != 0) {
                            //axios.js 已经截取了错误信息，这里不需要提示了。
                        } else {
                            resultCallback(200, "修改成功！", () => {
                                console.log("--update --");
                                this.getdata();
                                this.sure(item, index);
                            });
                        }
                    } else if (name == "formModalDataRole4") {
                        paramData.email = this.modalDataRole.email;
                        let res = await editUserInfo(paramData);
                        if (res.data.code != 0) {
                            //axios.js 已经截取了错误信息，这里不需要提示了。
                        } else {
                            resultCallback(200, "修改成功！", () => {
                                console.log("--update --");
                                this.getdata();
                                this.sure(item, index);
                            });
                        }
                    }
                }
            });
        }
    }
};
</script>
<style>
.user-cell {
    background: #eee;
    padding: 20px;
    height: 100vh;
    overflow-y: auto;
}

.cards {
    width: 31.6%;
    height: 252px;
    background: #ffffff;
    border-radius: 2px;
}
.container {
    width: 100%;
    height: 134px;
    /* margin-top:20px; */
    background: #ffffff;
    border-radius: 2px;
}
.sub {
    width: 100%;
    height: 301px;
    /* margin-top:20px; */
    background: #ffffff;
    border-radius: 2px;
}
.account {
    margin: 30px 0px 20px 30px;
}
.company {
    margin: 30px 0px 20px 19px;
}
.send {
    margin: 30px 30px 20px 20px;
}
.title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    border-bottom: 1px solid #e8e8e8;
}
.name {
    padding: 33px 0px 0px 56px;
    color: #000000;
}
.paddingTitle {
    padding: 0px 0px 0px 20px;
}
.fly {
    /* background-image: url(../../assets/img/iot2-dt-bg-4.png); */
    background-repeat: no-repeat;
}
.input-widths {
    width: 180px;
}

.personal-wrap {
    width: 348px;
    height: 347px;
    /* background-image:url("../../assets/images/personal.png"); */
    /* margin:0 auto; */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 40%;
    bottom: -50px;
    /*padding-top:220px; */
}

.ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
    height: 70px;
    line-height: 70px;
}
.button-space-25 {
    margin-left: 10px;
}
.ivu-collapse-simple {
    border-top: none;
}
.ivu-card-body {
    padding-top: 0;
}
</style>
